
<script setup>
import {
    Edit,
    Delete,
ElementPlus
} from '@element-plus/icons-vue'

import { ref } from 'vue'
import * as admin from '@/api/admin.js'
import {ElMessageBox} from 'element-plus'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { Plus } from '@element-plus/icons-vue'

import { useTokenStore } from '@/stores/token.js';
const tokenStore = useTokenStore();
import { ElMessage } from 'element-plus';

const currentPage = ref(1)//当前页
const total = ref(0)//总条数
const pageSize = ref(10)//每页条数

const dialogVisible = ref(false)  // 弹出框
const visibleDrawer = ref(false)  // 抽屉


const search_name = ref('') // 检索

//列表数据模型
const articles = ref([])


const woryTypeList = ref([])

// 添加模型
const addModel = ref({
    name: '',
    sex: '',
    role: 'user',
    phone: '',
    worktype: ''
})
// 修改模型
const updateModel = ref({
    id: '',
    OrderID:'',
    UserID:'',
    WorkerID:'',
    RepairTypeID:'',
    OrderDetails:'',
    Status:'',
    img:'',
    endimg:'',
    CreatedAt:'',
    UpdatedAt:'',
})

const typeList = async () => {
    const param = {
        currentPage: '1',
        
        role: 'workers'
    }
    const res = await admin.finUser(param)
    woryTypeList.value = res.data
}

// 修改模型赋值
const showDialog = (row) => {
    Object.assign(updateModel.value, row);
}

const formatDate = (date) => {
    if (!date) {
      return '';
    }
  const d = new Date(date);
  const year = d.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, '0'); 
  const day = String(d.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

const articleList = async () => {
    let param = {
        currentPage: currentPage.value,
        orderID: search_name.value,
        workerID: localStorage.getItem('userId'),
        status: '双状态',
        // status: '待处理',
        // WorkerID: search_name.value,
        role:'user'
    }
    const res = await admin.finOrder(param)
    articles.value = res.data
    total.value = res.total
    console.log(res.data)
}

const updateJinqu = async () => {
    const res = await admin.updateOrder(updateModel.value)
    if(res.code == 0){
        ElMessage.success(res.msg? res.msg:'修改成功');
        articleList()
        // dialogVisible
        // visibleDrawer
        dialogVisible.value = false
    }
}

const addArticle = async () => {
    const res = await admin.addOrder(addModel.value)
    if(res.code == 0){
        ElMessage.success(res.msg? res.msg:'添加成功');
        articleList()
        // dialogVisible
        // visibleDrawer
        visibleDrawer = false
    }
}   

const wancheng = async (row) => {
    const param = {
        status: '已完成',
        id: row.id,
    }
    const res = await admin.updateOrder(param)
    ElMessage.success('提交成功');
}


//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    currentPage.value = num
    articleList()
}

const uploadSuccess = (result)=>{
    updateModel.value.endimg = result.data;
}

articleList()
typeList()

</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>历史维修订单</span>
                <!-- <el-button type="primary" @click="visibleDrawer = true">添加维修工</el-button> -->
            </div>
        </template>

        <el-form inline>
            <el-form-item label="维修信息：">
                <!-- <el-select placeholder="请选择" v-model="categoryId">
                    <el-option v-for="c in categorys" :key="c.id" :label="c.categoryName" :value="c.id">
                    </el-option>
                </el-select> -->
                <el-input v-model="search_name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="articleList">搜索</el-button>
                <el-button @click="search_name = '';">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="articles" style="width: 100%">
            <el-table-column label="订单编号" prop="orderID"></el-table-column>
            <el-table-column label="用户" prop="yonghu"></el-table-column>
            <!-- <el-table-column label="维修工" prop="wokeUser"></el-table-column> -->
            <el-table-column label="维修信息" prop="orderDetails"></el-table-column>
            <el-table-column label="当前状态" prop="status"></el-table-column>
            
            <el-table-column label="创建时间" prop="createdAt"> 
                <template #default="{ row }">
                    {{ formatDate(row.createdAt) }}
                </template>
            </el-table-column>
            
            <el-table-column label="完成时间" prop="updatedAt"> 
                <template #default="{ row }">
                    {{ formatDate(row.updatedAt) }}
                </template>
            </el-table-column>

            <!-- 新增：维修图片 -->
            <el-table-column label="维修图片">
                <template #default="{ row }">
                    <img :src="row.img" alt="维修图片" style="width: 60px; height: 60px; object-fit: cover;" v-if="row.img">
                </template>
            </el-table-column>

            <!-- 新增：维修完成图片 -->
            <el-table-column label="完成图片">
                <template #default="{ row }">
                    <img :src="row.endimg" alt="完成图片" style="width: 60px; height: 60px; object-fit: cover;" v-if="row.endimg">
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button @click="showDialog(row); dialogVisible = true">上传维修图片</el-button>
                </template>
            </el-table-column>

            <el-table-column label="维修完成" prop="updatedAt">
                <template #default="{ row }">
                    <el-button type="warning" @click="wancheng(row)">提交</el-button>
                </template>
            </el-table-column>

            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>


        <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            @current-change="onCurrentChange"
            layout="prev, pager, next, jumper">
          </el-pagination>
    </el-card>


    <el-drawer v-model="visibleDrawer" title="添加用户" direction="rtl" size="50%">
        <!-- 添加文章表单 -->
        <el-form :model="addModel" label-width="100px">
            
            <el-form-item label="维修图片">
                <el-upload class="avatar-uploader" :auto-upload="true" :show-file-list="false"
                action="http://localhost:8080/upload/image"
                name="file"
                :headers="{'Authorization':tokenStore.token}"
                :on-success="uploadSuccess"
                >
                    <img v-if="addModel.img" :src="addModel.img" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addArticle('添加工人')">添加</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>

    <el-dialog v-model="dialogVisible" title="订单信息修改" width="30%">
        <el-form :model="updateModel" :rules="rules" label-width="100px" style="padding-right: 30px">
            
            <el-form-item label="维修图片">
                <el-upload class="avatar-uploader" :auto-upload="true" :show-file-list="false"
                action="http://localhost:8080/upload/image"
                name="file"
                :headers="{'Authorization':tokenStore.token}"
                :on-success="uploadSuccess"
                >
                    <img v-if="updateModel.endimg" :src="updateModel.endimg" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="updateJinqu()"> 确认 </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
.avatar-uploader {
    :deep() {
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

        .el-upload {
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
        }

        .el-upload:hover {
            border-color: var(--el-color-primary);
        }

        .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            text-align: center;
        }
    }
}

</style>